<template>
  <div>
    <div class="header">
      <div class="inputItem">
        <div class="title">全部状态</div>
        <div class="inputBox">
          <el-select class="select" v-model="WaybillStatus" placeholder="请选择">
            <el-option v-for="item in WaybillStatusArr" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="inputItem">
        <div class="title">运单编号</div>
        <div class="inputBox">
          <el-input v-model="WaybillNumber" @keyup.enter.native="searchHttpList1">
          </el-input>
        </div>
      </div>
      <div class="inputItem">
        <div class="title">货源方</div>
        <div class="inputBox">
          <el-input v-model="ownerName" @keyup.enter.native="searchHttpList1">
          </el-input>
        </div>
      </div>
      <div class="inputItem">
        <div class="title">货源方</div>
        <div class="inputBox">
          <el-input v-model="ownerName" @keyup.enter.native="searchHttpList1">
          </el-input>
        </div>
      </div>
      <div class="inputItem">
        <div class="title">项目名称</div>
        <div class="inputBox">
          <el-input v-model="projectName" @keyup.enter.native="searchHttpList1">
          </el-input>
        </div>
      </div>
      <div class="inputItem">
        <div class="title">运营商</div>
        <div class="inputBox">
          <el-input v-model="supplierName" @keyup.enter.native="searchHttpList1">
          </el-input>
        </div>
      </div>
      <div class="inputItem">
        <div class="title">承运车队</div>
        <div class="inputBox">
          <el-input v-model="fleetName" @keyup.enter.native="searchHttpList1">
          </el-input>
        </div>
      </div>
      <div class="inputItem">
        <div class="title">司机姓名</div>
        <div class="inputBox">
          <el-input v-model="driverName" @keyup.enter.native="searchHttpList1">
          </el-input>
        </div>
      </div>


      <!-- 查询 -->
      <el-button style="margin-top: 15px" type="primary" size="small" icon="el-icon-search"
        @click="searchHttpList1">查询</el-button>
      <el-button style="margin-top: 15px" type="plain" size="small" icon="el-icon-refresh-right"
        @click="CleanUp">清空</el-button>
    </div>
    <div class="main">
      <div class="list">
        <el-table :data="records" style="width: 100%" ref="table1">
          <el-table-column align="center" prop="SerialNumber" label="序号" width="70">
          </el-table-column>
          <el-table-column align="center" prop="transportStatus" label="运单状态" min-width="120">
            <template slot-scope="scope">
              <div class="tagBox">
                <div class="tag yellow" style="margin: 0 auto" v-if="scope.row.allotState == 1">
                  <div class="dian"></div>
                  <div class="text" v-if="!scope.row.waybillAuditResult">待审核</div>
                  <div class="text" v-if="scope.row.waybillAuditResult == 1">订单信息驳回</div>
                  <div class="text" v-if="scope.row.waybillAuditResult == 2">运单信息驳回</div>

                </div>
                <div class="tag" style="margin: 0 auto" v-else-if="scope.row.allotState == 0">
                  <div class="dian"></div>
                  <div class="text">运营商审核</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="waybillNo" label="运单编号" width="200">
          </el-table-column>
          <!-- <el-table-column align="center" prop="orderTypeStr" label="业务类型">
          </el-table-column> -->
          <el-table-column align="center" prop="ownerName" label="货源方">
          </el-table-column>
          <el-table-column align="center" prop="projectName" label="项目名称">
          </el-table-column>
          <el-table-column align="center" prop="supplierName" label="运营商">
          </el-table-column>
          <el-table-column align="center" prop="fleetName" label="承运车队">
          </el-table-column>
          <el-table-column align="center" prop="driverName" label="司机姓名">
          </el-table-column>
          <!--          <el-table-column align="center" prop="lineName" label="线路">-->
          <!--            <template slot-scope="scope">-->
          <!--              <div>-->
          <!--                {{ scope.row.lineName == null ? "无" : scope.row.lineName }}-->
          <!--              </div>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <div>
                <!-- /WaybillStatus/Details/:waybillId -->
                <el-button type="text" size="small" v-if="permissions.waybillDetail4.perms != null" @click="
                  $router.push(
                    '/orderManagement/WaybillManagement/Details/' +
                    scope.row.waybillId
                  )
                  ">详情</el-button>
                <el-button type="text" size="small" v-if="scope.row.waybillAuditResult == 1" @click="
                  $router.push({
                    path: '/orderManagement/CarrierOrder/editCarrierOrder',
                    query: { id: scope.row.orderId, type: '2' },
                  })
                  ">编辑</el-button>
                <el-button v-if="scope.row.allotState == 1 &&
                  (scope.row.transportStatus == 9) &
                  (permissions.audit5.perms != null)
                  " type="text" size="small" @click="
    showWaybillAuditDialog(
      scope.row.waybillId,
      scope.row.amendWeight,
      scope.row.cargoWeight,
      scope.row.measureUnitStr
    )
    ">审核</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="paginationBox">
        <el-pagination class="pagination" background layout="slot,prev, pager, next" :total="data.total * 1"
          :page-size="data.size * 1" :pager-count="5" @current-change="changePages($event)">
          <template slot>
            <span style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              ">共{{ data.total }}条,每页{{ data.size }}条</span>
          </template>
        </el-pagination>
      </div>
    </div>
    <!-- 运单审核 -->
    <!-- 详情对话框 -->
    <el-dialog class="waybillAuditBox" title="运单审核" :visible.sync="dialogVisible" width="600px">
      <!-- <div class="prompt">
        <i class="el-icon-warning"></i>
        <div class="prompt_text">

          该运单司机修正了运量，由{{ this.Weight.cargoWeight + this.Weight.measureUnitStr }}修正为{{ this.Weight.amendWeight?this.Weight.cargoWeight:this.Weight.amendWeight + this.Weight.measureUnitStr }}
        </div>
      </div> -->
      <el-form :model="AuditForm" :rules="AuditRules" ref="AuditForm" label-width="100px" class="demo_AuditForm">
        <el-form-item label="审核结果" prop="waybillAuditResult">
          <el-radio-group v-model="AuditForm.waybillAuditResult">
            <el-radio :label="3">合规</el-radio>
            <el-radio :label="5">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="AuditForm.waybillAuditResult == 3">
          <el-form-item label="运单运量" prop="cargoWeight">
            <el-input v-model="AuditForm.cargoWeight" :disabled="true">
              <div slot="suffix" style="padding: 0">
                <el-select v-model="AuditForm.amendMeasureUnitType" placeholder="请选择" class="danWei" disabled>
                  <el-option v-for="item in danWeiArr" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </el-input>
          </el-form-item>
          <el-form-item label="审核确定运量" prop="auditConfirmWeigh">
            <el-input v-model="AuditForm.auditConfirmWeigh">
              <div slot="suffix" style="padding: 0">
                <el-select v-model="AuditForm.amendMeasureUnitType" placeholder="请选择" class="danWei" disabled>
                  <el-option v-for="item in danWeiArr" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </el-input>
          </el-form-item>
          <el-form-item label="审核司机运费" prop="amount">
            <el-input v-model="AuditForm.amount">
              <div slot="suffix" style="padding-right: 10px; padding-left: 10px">
                元
              </div>
            </el-input>
          </el-form-item>

          <el-form-item label="审核异常扣款" prop="amountLose" v-show="AuditForm.waybillAuditResult != 3">
            <el-input v-model="AuditForm.amountLose">
              <div slot="suffix" style="padding-right: 10px; padding-left: 10px">
                元
              </div>
            </el-input>
          </el-form-item>
          <el-form-item label="审核说明" prop="resultInfo">
            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="AuditForm.resultInfo" maxlength="30">
            </el-input>
          </el-form-item>
          <el-form-item label="审核附件" prop="auditUrls">
            <el-upload class="upload" :action="url" :on-preview="handlePreview" :on-remove="handleRemove"
              :before-remove="beforeRemove" :limit="1" :on-exceed="handleExceed" :on-success="onSuccess"
              :file-list="fileList" :headers="headers" v-model="AuditForm.auditUrls">
              <el-button size="small" class="uploadBtn" type="primary">上传文件</el-button>
              <span slot="tip" class="el-upload__tip">
                仅可上传一份合同文件，支持PDF、JPG等格式
              </span>
            </el-upload>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item label="驳回类型" prop="waybill">
            <el-radio-group v-model="AuditForm.waybill">
              <el-radio :label="1">订单信息异常</el-radio>
              <el-radio :label="2">运单信息异常</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="运单信息地址:" v-if="AuditForm.waybill == 2">
            <div v-for="(item, i) in addrMood" :key="i">
              <div>{{ item.address }}</div>
              <!-- <div style="display: flex">
                <div v-for="(meth, k) in item.img" :key="k" class="addr_methimg">
                  <el-image @click.stop.prevent="images(meth, item)" :src="meth.imgUrl" class="addr_methimgitem">
                  </el-image>
                  <div class="addr_methimgqu" v-if="meth.isShow" @click.stop.prevent="meth.isShow = false">
                    <div class="addr_methimgquflx">
                      <img src="../../../assets/img/succs.png" width="50" />
                    </div>
                  </div>
                </div>
              </div> -->
              <div style="display: flex;align-items: center;">
                <div v-for="(meth, k) in item.img" :key="k" class="addr_methimg">
                  <el-image @click.stop.prevent="images(meth, item)" :src="meth.imgUrl" class="addr_methimgitem">
                  </el-image>
                  <div class="addr_methimgqu" v-if="meth.isShow" @click.stop.prevent="meth.isShow = false">
                    <div class="addr_methimgquflx">
                      <img src="@/assets/img/error.png" width="50">
                    </div>
                  </div>
                  <div class="absolute">
                    <!-- 备注 -->
                    <el-input resize="none" type="textarea" v-if="meth.isShow" placeholder="请输入备注" v-model="meth.remark"
                      maxlength="40" show-word-limit>
                    </el-input>
                  </div>
                </div>

              </div>
            </div>
          </el-form-item>
        </div>
        <el-form-item>
          <div style="display: flex; justify-content: flex-end">
            <el-button @click="resetForm('AuditForm')">取消</el-button>
            <el-button type="primary" @click="submitAudit()" v-if="AuditForm.waybillAuditResult != 5">确定</el-button>
            <el-button type="primary" @click="submit()" v-else>确定</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import httpApi from "@/http";
import breadcrumb from "@/components/breadcrumb.vue";
import titleVue from "@/components/titleVue";
import BASEURL from "@/http/BaseUrl";
export default {
  data() {
    return {

      driverName: "",
      supplierName: "",
      projectName: "",
      fleetName: "",
      ownerName: "",
      dialogVisible: false, //运单审核弹窗显示
      orderStatus: "0", //0:待审核运单
      WaybillStatus: "", //全部状态
      WaybillNumber: "", //运单编号
      entryName: "", //项目名称
      TypeSelected: "",
      records: [],
      data: {},
      pageCurrent: "1",
      size: "15",
      AuditResultValue: "",
      //全部状态选项
      WaybillStatusArr: [
        { value: "1", label: "待审核" },
        { value: "0", label: "运营商审核" },
      ],
      fileList: [], //上传文件
      AuditForm: {
        waybillId: "",
        cargoWeight: "",
        auditConfirmWeigh: "",
        measureUnitType: "",
        measureUnitType: "",
        amount: "",
        waybillAuditResult: 3,
        amountLose: "",
        SerialNumber: "",
        auditUrls: "",
        resultInfo: "",
        waybill: 1,
      },
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      url: BASEURL.TCHYURL + "/file/upload",
      Weight: {
        cargoWeight: "",
        measureUnitStr: "",
        amendWeight: "",
      },
      AuditRules: {},
      danWeiValue: "吨",
      danWeiArr: [
        {
          value: "2",
          label: "吨",
        },
        {
          value: "1",
          label: "车",
        },
        {
          value: "3",
          label: "件",
        },
      ],
      permissions: {},
      addrMood: null,
    };
  },
  created() {
    this.permissions = JSON.parse(sessionStorage.getItem("permissions"));
  },
  methods: {
    images(e, i) {
      e.isShow = !e.isShow;
      console.log(e, i);
    },
    async submit() {
      let data = {
        aberrantUrlDto: [],
        waybillId: this.AuditForm.waybillId,
        waybillAuditResult: this.AuditForm.waybill,
      };
      if (data.waybillAuditResult == 2) {
        this.addrMood.forEach((item, i) => {
          item.img.forEach((meth, k) => {
            if (meth.isShow) {
              data.aberrantUrlDto.push({
                url: meth.imgUrl,
                addrid: item.addrid,
              });
            }
          });
        });
        let some = [];
        data.aberrantUrlDto.forEach((el) => {
          if (!some.some((e) => e.addrid == el.addrid)) {
            some.push({ addrid: el.addrid, url: [] });
          }
        });
        some.forEach((item) => {
          data.aberrantUrlDto.forEach((el) => {
            if (item.addrid == el.addrid) {
              item.url.push(el.url);
            }
          });
        });
        some.forEach((item) => {
          item.url = item.url.join();
        });
        // 勾选表示不通过 需写入照片异常备注
        some.forEach((item, i) => {
          item.remark = this.addrMood[i].img[0].remark
        })
        data.aberrantUrlDto = some;
        if (data.aberrantUrlDto.length == 0) {
          this.$message.error("运单信息驳回不完整！");
          return false;
        }
      } else {
        data = {
          waybillId: this.AuditForm.waybillId,
          waybillAuditResult: this.AuditForm.waybill,
        };
      }
      let res = await this.$http.WaybillManagementApi.abnormal(data);
      if (res.data.code == 200) {
        this.$message.success("审核成功");
        this.dialogVisible = false;
        this.initList();
      } else {
        this.$message.error("审核失败");
      }
    },
    async informationNode(e) {
      let res = await this.$http.WaybillManagementApi.informationNode({
        waybillId: e,
      });
      this.addrMood = res.data.data;
      this.addrMood.forEach((item, i) => {
        item.img = [];
        item.url = item.url.split(",");
        item.url.forEach((meth) => {
          item.img.push({
            imgUrl: meth,
            isShow: false,
          });
        });
      });
      this.addrMood = JSON.parse(JSON.stringify(this.addrMood));
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList);
      this.fileList = [];
    },
    handlePreview(file) {
      // console.log(file, 3333);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onSuccess(response, file, fileList) {
      // console.log(response)
      this.AuditForm.auditUrls = response.data.url;
      this.fileList.push({
        name: response.data.name,
        url: this.response.data.url,
      });
    },
    changePages(val) {
      this.pageCurrent = val;
      this.initList();
    },
    initList() {
      // status判定 2:已完成运单, 1:在途运单, 0:待审核运单
      let params = {
        orderStatus: "0",
        current: this.pageCurrent,
        size: this.size,
      };
      httpApi.WaybillManagementApi.getWaybillList(params).then((res) => {
        // console.log(res);
        this.data = res.data.data;
        this.records = res.data.data.records;
        // console.log(this.records);
        // console.log("总数据", this.data);
        // console.log("列表数据", this.records);
        // 前端解决序号
        this.records.forEach((item, i) => {
          let num = i + 1 + Number(this.size) * (this.pageCurrent - 1);
          item.SerialNumber = num;
        });
      });
    },
    async resetForm(AuditForm) {
      this.AuditForm.measureUnitType = "";
      this.$refs[AuditForm].resetFields();

      this.dialogVisible = false;
    },
    searchHttpList1() {
      this.pageCurrent = 1;
      this.searchHttpList();
    },
    searchHttpList() {
      let params = {
        orderStatus: this.orderStatus,
        current: this.pageCurrent,
        size: this.size,
        allotState: this.WaybillStatus,
        waybillNo: this.WaybillNumber,
        ownerName: this.ownerName,
        projectName: this.projectName,
        supplierName: this.supplierName,
        fleetName: this.fleetName,
        driverName: this.driverName,

      };
      httpApi.WaybillManagementApi.getWaybillList(params).then((res) => {
        // console.log(res);
        this.data = res.data.data;
        this.records = res.data.data.records;
        this.records.forEach((item, i) => {
          let num = i + 1 + Number(this.size) * (this.pageCurrent - 1);
          item.SerialNumber = num;
        });
        // console.log("搜索总数据", this.data);
        // console.log("搜索列表数据", this.records);
      });
    },

    CleanUp() {
      this.WaybillNumber = "";
      this.WaybillStatus = "";
      (this.ownerName = ""),
        (this.projectName = ""),
        (this.supplierName = ""),
        (this.fleetName = ""),
        (this.driverName = "");
      this.searchHttpList1();
    },

    //
    showWaybillAuditDialog(id, amendWeight, cargoWeight, measureUnitStr) {
      this.AuditForm.waybillId = id;
      this.Weight.amendWeight = amendWeight;
      this.AuditForm.cargoWeight = cargoWeight;
      this.AuditForm.amendMeasureUnitType = measureUnitStr;
      this.Weight.measureUnitStr = measureUnitStr;
      this.informationNode(id);
      this.dialogVisible = true;
    },
    // 运单审核确定提交
    submitAudit() {
      this.danWeiArr.forEach((item) => {
        if (item.label == this.AuditForm.amendMeasureUnitType) {
          this.AuditForm.measureUnitType = item.value;
        }
      });
      let params = this.AuditForm;
      httpApi.WaybillManagementApi.auditWaybill(params).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("审核成功");
          this.dialogVisible = false;
          this.initList();
        } else {
          this.$message.error("审核失败");
        }
      });
    },
    // 记录滚动距离
    scrollEvent(res) {
      this.$route.meta.scrollTop = res.target.scrollTop
    },
  },
  activated() {
    //组件激活时监听表格滚动条位置,
    this.$refs.table1.bodyWrapper.addEventListener('scroll', this.scrollEvent, false)
    // 激活设置滚动位置
    this.$refs.table1.bodyWrapper.scrollTop = this.$route.meta.scrollTop
  },
  beforeRouteLeave(to, from, next) {
    // 为了节省资源，再离开页面的时候关闭对于scroll事件的监听
    this.$refs.table1.bodyWrapper.removeEventListener('scroll', this.scrollEvent)
    next()
  },


  mounted() {
    this.initList();
  },
};
</script>

<style lang="scss" scoped>
.addr_methimgquflx {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20%;
}

.addr_methimgqu {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  background: rgba(0, 0, 0, 0.4);
}

.addr_methimgitem {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}


.addr_methimg {
  position: relative;
  width: 100px;
  height: 100px;
  cursor: pointer;
  margin-right: 10px;

  .absolute {
    position: absolute;
    right: -230%;
    top: 50%;
    transform: translateY(-50%);


  }
}

.header {
  min-height: 76px;
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 29px;
  margin-bottom: 8px;
  flex-wrap: wrap;

  .inputItem {
    margin: 15px 30px 0 0;
    display: flex;
    align-items: center;

    >.title {
      color: #262626;
      font-size: 12px;
      margin-right: 7px;
    }

    >.inputBox {
      width: 160px;

      .select {
        ::v-deep .el-input__icon {
          line-height: 0;
        }
      }

      ::v-deep .el-input__inner {
        height: 32px;
        font-size: 12px;
      }

      ::v-deep .el-input__inner::placeholder {
        color: #c3c3c3;
        font-size: 12px;
      }
    }
  }
}

.main {
  width: 100%;
  height: calc(100vh - 293px);
  background-color: #fff;

  .list {
    height: calc(100% - 48px);
    padding: 0 30px;
    width: 100%;

    .tagBox {
      display: inline-block;

      .tag {
        // width: 63px;
        height: 28px;
        padding: 0 8px;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        background-color: #ecf5fe;
        color: #1890ff;

        &.yellow {
          background-color: #fffce8;
          color: #f9aa0d;

          >.dian {
            background-color: #f8b030;
          }
        }

        .dian {
          width: 4px;
          height: 4px;
          border-radius: 50%;
          margin-right: 4px;
          background-color: #1890ff;
        }
      }
    }

    ::v-deep .el-table__body-wrapper {
      height: calc(100vh - 390px) !important;
      overflow-y: scroll;
    }

    // 表头样式
    ::v-deep .el-table__header th {
      background-color: #f0f6fd;
      color: #262626;
      font-size: 12px;
      font-weight: bold;
      text-align: center;

      // 表 body的td
      ::v-deep .el-table__body td {
        color: #595959;
        font-size: 12px;
      }
    }
  }

  .paginationBox {
    width: 100%;
    background-color: #fff;
    height: 48px;
    padding: 0 30px;
    display: flex;

    .pagination {
      height: 48px;
      display: flex;
      align-items: center;
      margin-left: auto;
    }
  }
}

// 运单审核弹窗
.waybillAuditBox {
  ::v-deep .el-dialog__body {
    padding: 30px 30px 24px 30px;
  }

  .prompt {
    padding: 20px;
    height: 32px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    background-color: #fdf6ec;
    margin-bottom: 20px;
    border: 1px solid #faecd8;

    .el-icon-warning {
      color: #e6a23c;
      font-size: 13.33px;
      margin-right: 12px;
    }

    .prompt_text {
      color: #e6a23c;
      font-size: 12px;
      height: 22px;
      line-height: 22px;
    }
  }

  .uploadFileBtn {
    border: 1px solid #dcdfe6;
  }

  .danWei {
    ::v-deep .el-input__inner {
      width: 68px;
      border: none;
      background-color: #f5f7fa;
      color: #606266;
      font-size: 12px;
      height: 37px;
      border-left: 1px solid #dcdfe6;
      border-radius: 0;
      position: relative;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      right: -4px;
      top: -1px;
    }
  }
}
</style>
